<template>
  <section>
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in timeLineData"
        :key="index"
        :color="curStep >= index ? '#0bbd87' : ''"
        :hollow="curStep >= index ? false : true"
        :timestamp="activity.time"
        placement="top"
      >
        <el-card class="card-item">
          <h3>{{ activity.title }}</h3>
          <p>{{ activity.address }}</p>
          <p>{{ activity.doing }}....</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <div v-if="showLayer" class="layer-wrap flex" @click.self="showLay = false">
      <div class="flex">
        <p class="wel">
          <template v-for="(w, i) in WelCome">
            <Transition name="nested" v-show="welSetp >= i">
              <span :key="i">{{ w }}</span>
            </Transition>
          </template>
        </p>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { EventList, WelCome } from '@/config/event'
const WelComeDelay = 300
export default defineComponent({
  data () {
    return {
      timeLineData: EventList,
      curStep: 0,
      start: true,
      showLay: true,
      WelCome,
      welSetp: 0
    }
  },
  computed: {
    showLayer () {
      return this.start && this.showLay
    }
  },
  created () {
    this.runStart()
  },
  methods: {
    runStart () {
      this.handerWelCome()
    },
    handerWelCome () {
      const _welLen = this.WelCome.length
      const timer = setInterval(() => {
        if (this.welSetp >= _welLen) { clearInterval(timer); return }
        this.welSetp++
      }, WelComeDelay)
    }
  }
})
</script>

<style scoped lang="less">
section {
  padding: 20px 30px;
  .flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .card-item {
    h3 {
      margin-bottom: 8px;
    }
    p {
      line-height: 22px;
    }
  }
  .layer-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    top: 0;
    left: 0;
    > div {
      width: 80%;
      height: 90%;
      background: #fff;
      border-radius: 10px;
    }

    .wel {
      width: 120px;
      color: @priBlue;
    }
  }
}
</style>
